<template>
  <div id="index">
    <!--  DataV-Loading加载动画 -->
    <dv-loading v-if="loading">Loading...</dv-loading>
    <!-- 总体布局-start -->
    <div v-else class="koi-body">
      <!-- 第一部分-头部-start -->
      <div class="header">
        <div class="header-title">吊轨机器人巡检系统</div>
        <!-- <div class="header-title">上党区智慧养老管理平台</div> -->
        <div class="right">
          <div class="time">{{ currentTime }}</div>
          <div class="line"></div>
          <div class="date">
            <div class="date-text">{{ currentDate }}</div>
            <div class="week">{{ currentWeekday }}</div>
          </div>
        </div>
      </div>
      <!-- Element-UI Layout布局 -->
      <div class="layoutHome">
        <el-row :gutter="20">
          <el-col :xs="7" :sm="7" :md="7" :lg="6">
            <div :style="{ height: LHOne + 'px' }" class="one-mt">
              <leftOne :topCount="topCount" :height="LHOne"></leftOne>
            </div>
            <leftTwo :height="LHTwo" class="ml15" />
            <leftThree :height="LHThree" class="ml15 mt15" />
          </el-col>

          <el-col :xs="10" :sm="10" :md="10" :lg="12" class="map-block">
            <div class="maptitle" :style="{ height: LHOne + 'px' }">
              <div v-for="(tab, index) in maptabs" :key="index" @click="activeTab = tab" class="maptitle-item"
                :class="{ 'maptitle-item': true, active: activeTab === tab }">
                <span class="text">{{ tab }}</span>
              </div>
            </div>
            <div class="maptab-content left-two">
              <div v-if="activeTab === '机构大数据'">
                <centerMap1 :cHMap="cHMap" :height="cHOne" v-if="activeTab === '机构大数据'" />
              </div>
              <div v-if="activeTab === '老人大数据'">
                老人大数据的内容
              </div>
              <div v-if="activeTab === '街镇大数据'">
                街镇大数据的内容
              </div>
            </div>
          </el-col>

          <el-col :xs="7" :sm="7" :md="7" :lg="6">
            <div :style="{ height: LHOne + 'px' }" class="mr15 one-mt">
              <rightOne :topCount="topCount" :height="LHOne"></rightOne>
            </div>
            <righTwo :height="LHTwo" class="mr15" />
            <righThree :height="LHThree" class="mt15 mr15" />
          </el-col>

        </el-row>
      </div>
      <!-- 总体布局end -->
    </div>
  </div>
</template>

<script>
import { getTopCountList } from "@/api/pcs/index"
import { formatTime } from '../utils/index.js';
import moment from "moment";
export default {
  name: 'index',
  components: {
    leftOne: () => import('@/components/koi/left/one.vue'),
    leftTwo: () => import('@/components/koi/left/leftTwo.vue'),
    leftThree: () => import('@/components/koi/left/leftThree.vue'),
    rightOne: () => import('@/components/koi/right/one.vue'),
    righTwo: () => import('@/components/koi/right/righTwo.vue'),
    righThree: () => import('@/components/koi/right/righThree.vue'),
    centerMap1: () => import('@/components/koi/center/centerMap1.vue'),
  },
  data() {
    return {
      loading: true,
      // 装饰8颜色
      decorationColor: ['#568aea', '#000000'],
      // 时间
      timer: null,
      // 适应浏览器
      koiTime: null,
      // 定时跳转页面
      koiTimer: null,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      // 获取浏览器可视区域高度（包含滚动条）、
      // 获取浏览器可视区域高度（不包含工具栏高度）、
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的)
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
      HHeader: 76,
      LHOne: 177,
      LHTwo: 380,
      LHThree: 419,
      cHOne: 177,
      cHMap: 177,
      kHOne: 200,
      kHTwo: 500,
      kHThree: 300,
      kHFour: 500,
      kHFive: 450,
      kHSix: 300,
      kHSeven: 400,
      kHEight: 400,
      currentTime: "",
      currentDate: "",
      currentWeekday: "",
      activeTab: 0,
      tabs: [
        { title: '数据' },
        { title: '柱状图' },
        { title: '饼状图' }
      ],
      maptabs: ['机构大数据', '老人大数据', '街镇大数据'],
      activeTab: '机构大数据',
      topCount: {},
    }
  },
  computed: {
    underlineLeft() {
      const activeTabElement = document.querySelector('.tab-titles .active');
      if (activeTabElement) {
        return activeTabElement.offsetLeft + 'px';
      }
      return '0';
    }
  },
  created() {
    this.getTopCountList()
  },
  mounted() {
    // 获取当前时间并格式化为指定的字符串
    // 设置语言环境为中文
    moment.locale("zh-cn");
    setInterval(() => {
      this.currentTime = moment().format('HH:mm:ss');
      this.currentDate = moment().format('YYYY/MM/DD');
      this.currentWeekday = moment().format('dddd');
    }, 1000);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    // 鼠标移动时触发
    //window.addEventListener('mousemove',this.getHeight, false);
    this.timeInterval();
    this.cancelLoading();
    this.resizeScreen();
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null;
    clearInterval(this.koiTime);
    this.koiTime = null;
    clearInterval(this.koiTimer);
    this.koiTimer = null;
    // 页面大小改变时触发
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.removeEventListener('resize', this.getScreenWidth, false);
  },
  watch: {
    screenWidth: function (news, old) {
      // if (news <= 1200) {
      //   this.$notify({
      //     title: '浏览器高度提示',
      //     dangerouslyUseHTMLString: true,
      //     message: '<strong style= "color: teal">浏览器宽度<1200px将不再进行自适应</strong>',
      //     type: 'warning',
      //     position: 'bottom-right',
      //     duration: 2000
      //   });
      // }
    },
    screenHeight: function (news, old) {
      // if (news <= 700) {
      //   this.$notify({
      //     title: '浏览器宽度提示',
      //     dangerouslyUseHTMLString: true,
      //     message: '<strong style= "color: teal">浏览器高度<700px将不再进行自适应</strong>',
      //     type: 'warning',
      //     position: 'bottom-right',
      //     duration: 2000
      //   });
      // }
    }
  },
  methods: {
    timeInterval() {
      this.timer = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy/MM/dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    resizeScreen() {
      this.koiTime = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      // 四舍五入取整数
      this.HHeader = Math.round(this.screenHeight * 0.08);
      this.LHOne = Math.round(this.screenHeight * 0.12);
      this.LHTwo = Math.round(this.screenHeight * 0.35);
      this.LHThree = Math.round(this.screenHeight * 0.35);
      this.cHOne = Math.round(this.screenHeight * 0.74);
      this.cHMap = Math.round(this.screenHeight * 0.68);


      this.kHOne = Math.round(this.screenHeight * 0.47);
      this.kHTwo = Math.round(this.screenHeight * 0.475);
      this.kHThree = Math.round(this.screenHeight * 0.90);
      this.kHFour = Math.round(this.screenHeight * 0.38);
      this.kHFive = Math.round(this.screenHeight * 0.385);
      this.kHSix = Math.round(this.screenHeight * 0.3);
      this.kHSeven = Math.round(this.screenHeight * 0.32);
      this.kHEight = Math.round(this.screenHeight * 0.325);
      //console.log(this.screenHeight +"-"+ Math.round(this.percentHThirty) +"-"+ Math.round(this.percentHForty));
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      //console.log("hh-"+this.screenWidth+"-"+this.screenHeight);
    },
    changeTab(index) {
      this.activeTab = index;
    },
    getTopCountList() {
      getTopCountList().then((res) => {
        if (res.code === 2000) {
          this.topCount = res.data
        }
      }).catch(err => {
        console.log(err)
      })
    },


  }
}
</script>

<style lang="less" scoped>
.map-block {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // height: 300px;
  /* 这里可以设置map-block的样式 */
}

.maptitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.maptitle-item {
  width: 100%;
  height: 44px;
  background: url("../assets/images/maptitle.png") left top no-repeat;
  background-size: 100% 44px;
  position: relative;
  margin: 0 10px;
  line-height: 44px;
  cursor: pointer;

  .text {
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #0096ff;
    background: linear-gradient(92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 25%;
  }

  &.active {
    color: #fff;

    .text {
      color: #b0d4ff;
      background: linear-gradient(92deg,
          #b0d4ff 0%,
          #cffbff 48.8525390625%,
          #99ddff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

/* 指定地图的宽高 */
.amapClass {
  width: 100%;
}

.box {
  position: relative;
  // width: 338px;
  // height: 180px;
  width: 400px;
  height: 213px;
  background-image: url("../assets/images/InfoWindow.png");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.box-inner {
  position: absolute;
  top: 10px;
  left: 20px;
  right: 10px;
  bottom: 10px;
  // background-color: #006AFB;
}

@media screen and (max-width: 1226px) {
  .koi-body {
    .layoutHome {
      top: 80px;
    }

    .header {
      height: 60px;

      .header-title {
        font-size: 30px;
        line-height: 58px;
      }

      .right {
        .time {
          font-size: 18px;
        }
      }
    }
  }

  .maptitle-item {
    .text {
      font-size: 16px;
    }
  }
}
</style>
